<template>
  <div>
    <BpmnModel
      v-if="dataExit"
      :xml="xml"
      :is-view="false"
      @save="save"
      @showXML="showXML"
    />
    <!--在线查看xml-->
    <el-drawer :title="xmlTitle" :modal="false" direction="rtl" v-model="xmlOpen" size="60%">
      <!-- 设置对话框内容高度 -->
        <el-scrollbar>
            <pre v-if="xmlData"><code class="xml" v-html="highlightedXml"></code></pre>
        </el-scrollbar>
    </el-drawer>
  </div>
</template>
<script setup>
import {readXml, roleList, saveXml, userList, expList} from "@/api/flowable/definition";
import BpmnModel from '@/components/Process'
import vkBeautify from 'vkbeautify'
import hljs from 'highlight.js'
// import 'highlight.js/styles/atelier-savanna-dark.css'
import { ref, onMounted, getCurrentInstance, computed } from 'vue';
import {  useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';

const { proxy } = getCurrentInstance();
const route = useRoute();

const xml = ref(""); // 后端查询到的xml
const modeler = ref("");
const dataExit = ref(false);
const xmlOpen = ref(false);
const xmlTitle = ref('');
const xmlData = ref('');


// 计算属性用于高亮处理的XML
const highlightedXml = computed(() => {
  if (!xmlData.value) return '';
  // const highlighted = hljs.highlight(xmlData.value, { language: 'xml' }).value;
  const highlighted = hljs.highlight('xml', xmlData.value).value;
  return highlighted;
});

/** xml 文件 */
function getXmlData(deployId) {
  // 发送请求，获取xml
  readXml(deployId).then(res => {
    xml.value = res.data;
    modeler.value = res.data;
  });
}

/** 保存xml */
function save(data) {
  const params = {
    name: data.process.name,
    category: data.process.category,
    xml: data.xml
  };
  saveXml(params).then(res => {
    ElMessage.success(res.msg);
    // 关闭当前标签页并返回上个页面
    const obj = { path: "/flowable/definition", query: { t: Date.now() } };
    proxy.$tab.closeOpenPage(obj);
  });
}

/** 指定流程办理人员列表 */
function getDataList() {
  userList().then(res => {
    proxy.modelerStore.userList = res.data;
  });
  roleList().then(res => {
    proxy.modelerStore.roleList = res.data;
  });
  expList().then(res => {
    proxy.modelerStore.expList = res.data;
    dataExit.value = true;
  });
}

/** 展示xml */
function showXML(data) {
  xmlTitle.value = 'xml查看';
  xmlOpen.value = true;
  xmlData.value = vkBeautify.xml(data);
}

onMounted(() => {
  const deployId = route.query && route.query.deployId;
  //  查询流程xml
  if (deployId) {
    getXmlData(deployId);
  }
  getDataList();
});
</script>
<style lang="scss" scoped>
.content-box{
  line-height: 10px;
}
// 修改对话框高度
.showAll_dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  :deep(.el-dialog) {
    margin: 0 auto !important;
    height: 80%;
    overflow: hidden;
    background-color: #ffffff;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
      // 下边设置字体，我的需求是黑底白字
      color: #ffffff;
      padding: 0 15px;
    }
  }
}
</style>
